<template>
  <view v-if="list.length" class="home-notice-bar">
    <view class="notice__left">
      <image class="notice-png" src="@/static/images/home/notice.png" mode="widthFix" />
      <text>中心</text>
    </view>
    <view class="notice__right">
      <swiper
        class="swiper"
        circular
        :autoplay="true"
        :vertical="true"
        :indicator-dots="false"
        :interval="3000"
        :duration="500"
      >
        <swiper-item v-for="item in list" :key="item.id">
          <view class="swiper-item">
            <view class="swiper-item__header">
              <view class="status">[{{ item.taskStatusName }}]</view>
              <view class="title ellipsis">{{ item.notifyTitle }}</view>
            </view>
            <view class="description ellipsis">{{ item.notifyContent }}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { homeNoticeData } from './_data'

const list = ref<any[]>([])
async function search() {
  setTimeout(() => {
    list.value = homeNoticeData.rows
  }, 100)
}

onLoad(() => {
  search()
})
</script>

<style lang="scss" scoped>
.home-notice-bar {
  display: flex;
  padding: 12px 10px;
  margin: 0 $margin;
  background-color: #fff;
  border-radius: 4px;
}

.notice__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 8px;
  margin-right: 8px;
  font-weight: 500;
  color: #5c6772;
  border-right: 1px solid $color-border;
  .notice-png {
    width: 36px;
  }
}

.notice__right {
  flex: 1;
  font-size: 14px;
  color: $color-text-3;
}

.swiper {
  height: 100%;
}

.swiper-item {
  &__header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-weight: 500;
    .status {
      flex-shrink: 0;
      color: #f88615;
    }
    .title {
      color: $color-text-1;
    }
  }
  .description {
    font-size: 13px;
    line-height: 14px;
  }
}
</style>
